<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    v-bind  实现标签中属性的动态操作
    v-bind:src  -> 简写  :src
-->
<div id="app">
    <!--    <img v-bind:src="url" alt="" id="img">-->
    <img :src="url" alt="" id="img">
    <button @click="changeImage">点击切换图片</button>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            url: '../img/1.png',
            imgs: [
                '../img/1.png', '../img/2.png', '../img/3.png'
            ],
            index: 0
        },
        methods: {
            changeImage() {
                this.index++
                if (this.index == 3) {
                    this.index = 0
                }
                this.url = this.imgs[this.index]
            }
        }
    })
</script>
</body>
</html>
